import React, { Component } from 'react'
import { connect } from 'react-redux'// 高阶组件，原则上connect()称之为高阶组件
import actions from './store/actionCreator/pro'

// 展示组件 --- UI组件
class App extends Component {
    componentDidMount() {
        // console.log()
        this.props.getBannerList()
        this.props.getProList()
    }

    render() {
        const { count, proList } = this.props
        return (
            <div>
                <button onClick={() => {
                    this.props.reduceFn()
                }}>-</button>
                {count}
                <button onClick={() => {
                    this.props.addFn()
                }}>+</button>
                <hr />
                {
                    proList && proList.map(item => {
                        return (
                            <h4 key={item.proid}>{
                                item.proname
                            }</h4>
                        )
                    })
                }
            </div>
        )
    }
}
// connect()(App)
// connect(() => {}, () => {})
// mapStateToProps 负责给组件提供状态使用的，默认参数为state
const mapStateToProps = (state) => {
    return {
        count: state.app.count,
        proList: state.pro.proList,
        bannerList: state.pro.bannerList
    }
}

// mapDispatchToProps 负责组件的业务逻辑，默认参数为disaptch,可以触发修改状态
const mapDispatchToProps = (dispatch) => {
    return {
        reduceFn () {
            dispatch({
                type: 'REDUCE',
                payload: 5
            })
        },
        addFn () {
          dispatch({
            type: 'ADD',
            payload: 5
          })
        },
        getBannerList () {
        //   fetch('http://121.89.205.189/api/banner/list')
        //     .then(res => res.json())
        //     .then(res => {
        //       dispatch({
        //         type: 'CHANGE_BANNER_LIST',
        //         payload: res.data
        //       })
        //     })
        dispatch(actions.getBannerListAction)
        },
        getProList () {
        //   fetch('http://121.89.205.189/api/pro/list')
        //     .then(res => res.json())
        //     .then(res => {
        //       dispatch({
        //         type: 'CHANGE_PRO_LIST',
        //         payload: res.data
        //       })
        //     })
        dispatch(actions.getProListAction(2))
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)